import React, { useState } from "react";
import { NavBar, Tabs, Card, Toast, Rate } from "react-vant";
import { Arrow } from "@react-vant/icons";

function Comm() {
  const [tab, setTab] = useState(["全部评价", "有图评价"]);
  const [value, setValue] = useState(4);

  return (
    <div style={{ width: "100%", height: "100vh", backgroundColor: "#f5f5f5" }}>
      <NavBar title="我的评价" />
      <Tabs active="c">
        <Tabs.TabPane name={1111} title={"全部评价"}>
          
          <main style={{ padding: "0 20px", width: "auto", margin: "10px auto" }}>
            <div
              style={{
                borderRadius: "10px",
                backgroundColor: "#FAFAFA",
                paddingBottom: 15,
              }}
            >
              <Card round style={{ marginBottom: 10, padding: "10px 0px" }}>
                <Card.Header
                  extra={<Arrow />}
                  onClick={() => Toast.info("点击了Header区域")}
                >
                  <div
                    style={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <img
                      src="https://cdn8.axureshop.com/demo2024/1877666/images/%E9%80%80%E6%AC%BE%E5%8D%8F%E5%95%86%E5%8E%86%E5%8F%B2/u6711.svg"
                      alt=""
                    />
                    <span>
                      <p>华莱士-凤凰广场2店</p>
                      <p>用户昵称</p>
                    </span>
                  </div>
                </Card.Header>

                <Card.Body onClick={() => Toast.info("点击了Body区域")}>
                  <p
                    style={{
                      display: "flex",
                      alignItems: "center",
                      color: "#999",
                    }}
                  >
                    商家：
                    <Rate
                      allowHalf
                      value={value}
                      onChange={setValue}
                      color="#FE5425"
                    />{" "}
                    <span style={{ marginLeft: 20 }}>味道4星 包装5星</span>
                  </p>

                  <p style={{ display: "flex", color: "#999" }}>
                    <p style={{ width: "70px" }}>推荐：</p>
                    <p>
                      牛肉拌面，红烧狮子头，西湖醋鱼，白灼小河虾，清蒸黄花鱼
                    </p>
                  </p>

                  <p style={{ margin: "10px 0px" }}>
                    还不错哦，比较清淡，适合南方人口味，特别是牛肉拉面值得推荐。
                  </p>
                </Card.Body>
                <Card.Footer>
                  <div
                    style={{
                      borderRadius: "10px",
                      backgroundColor: "#F9F9F9",
                      padding: "15px 15px",
                      color: "#999",
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                      }}
                    >
                      <span>商家回复</span> <p>2024-08-01 10:00:00</p>
                    </div>
                    <p style={{ textAlign: "justify" }}>
                      周六日客流量太多，服务员招呼不周导致场面嘈杂，我们将会加大服务员的培训力度。
                    </p>
                  </div>
                </Card.Footer>
              </Card>
              <p style={{ padding: "10px 15px", color: "#999" }}>
                配送：
                <Rate
                  allowHalf
                  value={value}
                  onChange={setValue}
                  color="#FE5425"
                />
              </p>
              <p style={{ padding: "10px 15px" }}>
                有点慢了，但是大风大雨的，送餐速度还能准时，辛苦外卖小哥了。
              </p>
            </div>



            <div
              style={{
                borderRadius: "10px",
                backgroundColor: "#FAFAFA",
                paddingBottom: 15,
              }}
            >
              <Card round style={{ marginBottom: 10, padding: "10px 0px" }}>
                <Card.Header
                  extra={<Arrow />}
                  onClick={() => Toast.info("点击了Header区域")}
                >
                  <div
                    style={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <img
                      src="https://cdn8.axureshop.com/demo2024/1877666/images/%E9%80%80%E6%AC%BE%E5%8D%8F%E5%95%86%E5%8E%86%E5%8F%B2/u6711.svg"
                      alt=""
                    />
                    <span>
                      <p>华莱士-凤凰广场2店</p>
                      <p>用户昵称</p>
                    </span>
                  </div>
                </Card.Header>

                <Card.Body onClick={() => Toast.info("点击了Body区域")}>
                  <p
                    style={{
                      display: "flex",
                      alignItems: "center",
                      color: "#999",
                    }}
                  >
                    商家：
                    <Rate
                      allowHalf
                      value={value}
                      onChange={setValue}
                      color="#FE5425"
                    />{" "}
                    <span style={{ marginLeft: 20 }}>味道4星 包装5星</span>
                  </p>

                  <p style={{ display: "flex", color: "#999" }}>
                    <p style={{ width: "70px" }}>推荐：</p>
                    <p>
                      牛肉拌面，红烧狮子头，西湖醋鱼，白灼小河虾，清蒸黄花鱼
                    </p>
                  </p>

                  <p style={{ margin: "10px 0px" }}>
                    还不错哦，比较清淡，适合南方人口味，特别是牛肉拉面值得推荐。
                  </p>
                </Card.Body>
                <Card.Footer>
                  <div
                    style={{
                      borderRadius: "10px",
                      backgroundColor: "#F9F9F9",
                      padding: "15px 15px",
                      color: "#999",
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                      }}
                    >
                      <span>商家回复</span> <p>2024-08-01 10:00:00</p>
                    </div>
                    <p style={{ textAlign: "justify" }}>
                      周六日客流量太多，服务员招呼不周导致场面嘈杂，我们将会加大服务员的培训力度。
                    </p>
                  </div>
                </Card.Footer>
              </Card>
              <p style={{ padding: "10px 15px", color: "#999" }}>
                配送：
                <Rate
                  allowHalf
                  value={value}
                  onChange={setValue}
                  color="#FE5425"
                />
              </p>
              <p style={{ padding: "10px 15px" }}>
                有点慢了，但是大风大雨的，送餐速度还能准时，辛苦外卖小哥了。
              </p>
            </div>

          </main>
        </Tabs.TabPane>
        <Tabs.TabPane name={2222} title={"有图评价"}>
          <main style={{ padding: "0 20px", width: "auto" }}>
            <div
              style={{
                borderRadius: "10px",
                backgroundColor: "#FAFAFA",
                paddingBottom: 15,
              }}
            >
              <Card round style={{ marginBottom: 10, padding: "10px 0px" }}>
                <Card.Header
                  extra={<Arrow />}
                  onClick={() => Toast.info("点击了Header区域")}
                >
                  <div
                    style={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <img
                      src="https://cdn8.axureshop.com/demo2024/1877666/images/%E9%80%80%E6%AC%BE%E5%8D%8F%E5%95%86%E5%8E%86%E5%8F%B2/u6711.svg"
                      alt=""
                    />
                    <span>
                      <p>华莱士-凤凰广场2店</p>
                      <p>时间</p>
                    </span>
                  </div>
                </Card.Header>

                <Card.Body onClick={() => Toast.info("点击了Body区域")}>
                  <p
                    style={{
                      display: "flex",
                      alignItems: "center",
                      color: "#999",
                    }}
                  >
                    商家：
                    <Rate
                      allowHalf
                      value={value}
                      onChange={setValue}
                      color="#FE5425"
                    />{" "}
                    <span style={{ marginLeft: 20 }}>味道4星 包装5星</span>
                  </p>

                  <p style={{ margin: "10px 0px" }}>
                    <p>一如既往的不错，比较清淡，适合南方人口味，我食堂买的一样。</p>
                    <img
                      src="https://cdn8.axureshop.com/demo2024/1877666/images/%E5%BA%97%E9%93%BA%E4%B8%BB%E9%A1%B5_%E7%82%B9%E9%A4%90/u2309.svg"
                      alt=""
                      style={{ width: "30%" }}
                    />
                    <img src="https://cdn8.axureshop.com/demo2024/1877666/images/%E6%88%91%E7%9A%84%E8%AF%84%E4%BB%B7_%E5%85%A8%E9%83%A8/u9374.svg" 
                      style={{ width: "30%" }}
                    />
                    <img src="https://cdn8.axureshop.com/demo2024/1877666/images/%E6%88%91%E7%9A%84%E8%AF%84%E4%BB%B7_%E5%85%A8%E9%83%A8/u9375.svg" 
                      style={{ width: "30%" }}
                    />
                  </p>
                </Card.Body>
                <Card.Footer>
                  <div
                    style={{
                      borderRadius: "10px",
                      backgroundColor: "#F9F9F9",
                      padding: "15px 15px",
                      color: "#999",
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                      }}
                    >
                      <span>商家回复</span> <p>2024-08-01 10:00:00</p>
                    </div>
                    <p style={{ textAlign: "justify" }}>
                      亲爱的顾客，感谢您对我们店铺的支持与喜爱，真的很抱歉没有让您100%满意，但我们会继续努力，为您提供更好的服务。
                    </p>
                  </div>
                </Card.Footer>
              </Card>
              <p style={{ padding: "10px 15px", color: "#999" }}>
                配送：
                <Rate
                  allowHalf
                  value={value}
                  onChange={setValue}
                  color="#FE5425"
                />
              </p>
              <p style={{ padding: "10px 15px" }}>
                有点慢了，但是大风大雨的，送餐速度还能准时，辛苦外卖小哥了。
              </p>
            </div>
          </main>
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
}
export default Comm;
